<template>
  <div id="voice">
    <textarea placeholder="语音识别结果" v-model="voice"></textarea>
    <div @click="startRecordClick" class="startRecord animated pulse">开始录音</div>
    <div @click="stopRecordClick" class="stopRecord">停止录音</div>
    <div v-if="isShow" @click="playRecordClick" class="playRecord">播放录音</div>
  </div>
</template>

<script>
export default {
  name: 'voice',
  data () {
    return {
        voice: '',
        voiceSrc: '',
        isShow: false,
    }
  },
  mounted(){
  },
  activated(){
    this.wx_config();
  },
  methods: {
    // 播放录音
    playRecordClick(){
      var amr = new this.$BenzAMRRecorder();
      var amrUrl = this.voiceSrc;
      amr.initWithUrl(amrUrl).then(function() {
        amr.play();
      });
      amr.onEnded(function() {
        alert('播放完毕');
      })
    },
    // 开始录音
    startRecordClick(){
        console.log('startRecord')
        wx.startRecord();
    },
    // 停止录音
    stopRecordClick(){
        console.log('stopRecord')
        var self = this;
        wx.stopRecord({
            success: function (res) {
                var localId = res.localId;
                // 语音转换为文字
                wx.translateVoice({
                    localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
                    isShowProgressTips: 0, // 默认为1，显示进度提示
                    success: function (res) {
                        // console.log(res.translateResult);
                        // alert(res.translateResult); // 语音识别的结果
                        self.voice = res.translateResult;
                    }
                });
                // 语音上传
                wx.uploadVoice({
                    localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        var serverId = res.serverId; // 返回音频的服务器端ID
                        alert(serverId);
                        self.$axios.get('voice',{
                            params: {
                                serverId: serverId
                            }
                        }).then(function (res){
                            // alert(JSON.stringify(res.data));
                            var voiceSrc = res.data.imageUrl;
                            self.voiceSrc = voiceSrc;
                            self.isShow = true;
                        }).catch(function (err){

                        })
                    }
                })
            }
        });
    },
     // 微信配置
    wx_config: function(){
      var self = this;
      var pageUrl = self.$utils.getBaseUrl();
      // var pageUrl = location.href.split('?')[0];
      self.$axios.get('wx_config',{
        params: {
          pageUrl: pageUrl
        }
      }).then(function (res){
      	 var data = res.data;
        wx.config({
          debug: false,
          appId: data.appId,
          timestamp: data.timestamp,
          nonceStr: data.nonceStr,
          signature: data.signature,
          jsApiList: [
              'onMenuShareTimeline',
              'onMenuShareAppMessage',
              'startRecord',
              'stopRecord',
              'onVoiceRecordEnd',
              'translateVoice',
              'uploadVoice'
            ]
        });
        wx.ready(function(){
          console.log('ready')
          // 微信好友分享
          wx.onMenuShareAppMessage(self.$utils.shareData);
          // 朋友圈分享
          wx.onMenuShareTimeline(self.$utils.shareData);
          wx.error(function(res){
    		    console.log('失败');
          });
        });
      }).catch(function (error) {

      });
  	},
    // 上 按钮点击事件
    upClick: function(){
        this.$router.push('/home');
    },
    // 关闭
    closeBtnClick: function(){
      this.isShow = false;
    },
  },
}
</script>
<style scoped lang="less">

textarea{
    height: 400px;
    width: 100%;
}
.startRecord {
    width: 300px;
    height: 88px;
    background-color: red;
    text-align: center;
    line-height: 88px;
    margin: 20px auto;
    user-select:none;
}
.stopRecord{
    width: 300px;
    height: 88px;
    background-color: blueviolet;
    text-align: center;
    line-height: 88px;
    margin: 20px auto;
    user-select:none;
}
.playRecord{
  width: 300px;
  height: 88px;
  background-color: orange;
  text-align: center;
  line-height: 88px;
  margin: 20px auto;
  user-select:none;
}
.animated{
    animation-iteration-count: 1000;
}
</style>
